<template>
    <div class="w-full h-full -100 dark:-900 p-3">
        <div class="w-full h-full flex flex-col p-4 bg-white dark:bg-black text-gery-700 dark:text-gery-300">
            <a-tabs v-model:activeKey="state.activeKey">
                <a-tab-pane key="1" tab="css"></a-tab-pane>
                <a-tab-pane key="2" tab="json"></a-tab-pane>
            </a-tabs>
            <div class="h-full flex" v-if="state.activeKey === '1'">
                <div class="w-full h-full p-4">
                    <a-textarea @change="submit" style="height: 100%;" v-model:value="value1" placeholder="CSS" />
                </div>
                <div class="w-full h-full p-4">
                    <a-textarea style="height: 100%;" v-model:value="value3" />
                </div>
            </div>
            <div class="h-full flex" v-if="state.activeKey === '2'">
                <div class="w-full h-full flex">
                    <div class="w-full h-full p-4">
                        <a-textarea @change="submit2(),submit3(),submit4()" style="height: 100%;width:100%;" v-model:value="value2" placeholder="JSON" />
                    </div>
                    <div class="w-full h-full p-4">
                        <a-textarea style="height: 100%;width:100%;" v-model:value="value4" />
                    </div>
                    <div class="w-full h-full p-4">
                        <a-textarea style="height: 100%;width:100%;" v-model:value="value5" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
let state = reactive({
    activeKey: "1",
    value1: "",
    value2: "",
    value3: "",
    value4: "",
    value5: "",
    value6: "",
});
function submit() {
    let str = state.value1;
    str = str.replace(/\/\*(.|\n)*?\*\//g, ""); //去除注释
    str = str.replace(/^\s+|\s+$/g, ""); //清除首尾空格
    str = str.replace(/(:)\s+/g, "$1"); //去除 冒号后多个空格              如 width:  100px  => width:100px
    str = str.replace(/\s{2,}/g, " "); //去除 多余空格2个以上             如 margin: 10px   20px  30px  => margin:10px 20px 30px
    str = str.replace(/,\s+|\s+,/g, ","); //去除 多个样式共享时的多余空格    如 h1,  h2  , h3  =>h1,h2,h3
    str = str.replace(/;{2,}|;\s+/g, ";"); //去除 多个分号或分号后面多余空格  如 width:200px;;  height:100px  => width:200px;height:100px
    str = str.replace(/\s*\{\s*/g, "{"); //去除 选择符后面多余空格          如 div { height:100px}   => div{height:100px}
    str = str.replace(/\s*}\s*/g, "}"); //去除 选择器前面多余空格          如 div{height:100px}  a{}   => div{height:100px}a{}
    str = str.replace(/[\n\t\f\r]/g, ""); //去除换行,制表符,分页符,回车
    str = str.replace(/;}/g, "}"); //去除 元素样式的最后分号          如 div{height:100px;} => div{height:100px}
    state.value3 = str.replace(/\}/g, "}\n");
}
function submit2() {
    let str = state.value2;
    str = str.replace(/\/\*(.|\n)*?\*\//g, ""); //去除注释
    str = str.replace(/^\s+|\s+$/g, ""); //清除首尾空格
    str = str.replace(/(:)\s+/g, "$1"); //去除 冒号后多个空格              如 width:  100px  => width:100px
    str = str.replace(/\s{2,}/g, " "); //去除 多余空格2个以上             如 margin: 10px   20px  30px  => margin:10px 20px 30px
    str = str.replace(/,\s+|\s+,/g, ","); //去除 多个样式共享时的多余空格    如 h1,  h2  , h3  =>h1,h2,h3
    str = str.replace(/;{2,}|;\s+/g, ";"); //去除 多个分号或分号后面多余空格  如 width:200px;;  height:100px  => width:200px;height:100px
    str = str.replace(/\s*\{\s*/g, "{"); //去除 选择符后面多余空格          如 div { height:100px}   => div{height:100px}
    str = str.replace(/\s*}\s*/g, "}"); //去除 选择器前面多余空格          如 div{height:100px}  a{}   => div{height:100px}a{}
    str = str.replace(/[\n\t\f\r]/g, ""); //去除换行,制表符,分页符,回车
    str = str.replace(/;}/g, "}"); //去除 元素样式的最后分号          如 div{height:100px;} => div{height:100px}
    str = str.replace(/,}/g, "}"); //去除 元素样式的最后逗号          如 div{height:100px;} => div{height:100px}
    state.value4 = str.replace(/\},/g, "},\n");
}
function submit3() {
    let text = state.value2;
    text = text.split("\n").join(" ");
    var t = [];
    var inString = false;
    for (var i = 0, len = text.length; i < len; i++) {
        var c = text.charAt(i);
        if (inString && c === inString) {
            if (text.charAt(i - 1) !== "\\") {
                inString = false;
            }
        } else if (!inString && (c === '"' || c === "'")) {
            inString = c;
        } else if (!inString && (c === " " || c === "\t")) {
            c = "";
        }
        t.push(c);
    }
    text = t.join("");
    state.value5 = text;
}
defineExpose({});
const { value1, value2, value3, value4, value5 } = toRefs(state);
</script>